<template>
  <view>
    <view id="string" @click="onClick" :data-test-text="string" class="content">string:</view>
    <view id="number" @click="onClick" :data-test-text="number" class="content">number:</view>
    <view id="boolean" @click="onClick" :data-test-text="boolean" class="content">boolean:</view>
    <view id="object" @click="onClick" :data-test-text="object" class="content">object:</view>

    <button @click="getBoundingClientRect('string')">getBoundingClientRect string</button>
    <button @click="getBoundingClientRect('number')">getBoundingClientRect number</button>
    <button @click="getBoundingClientRect('boolean')">getBoundingClientRect boolean</button>
    <button @click="getBoundingClientRect('object')">getBoundingClientRect object</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      string: 'abc',
      number: 123,
      boolean: true,
      object: {
        key: 'value'
      },
      dataset: {}
    }
  },
  methods: {
    onClick(event) {
      this.dataset = event.target.dataset
      console.log(event)
    },
    async getBoundingClientRect(id) {
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this)
        query.select('#' + id).boundingClientRect(data => {
          resolve(data.dataset)
          console.log(data)
        }).exec()  
      })
    },
  }
}
</script>

<style>
.content::after {
  content: attr(data-test-text);
}
</style>